<template>
  <div class="app" v-if="dUserinfo">
    <span href="/" class="fa fa-home" @click="gotoUrl(domain)"></span>
      <IntroMask :userinfo="dUserinfo" v-if="showIntroMask"></IntroMask>
      <SheadV1 color="#333333" :is_jump="false" class="sheadv1" :is_show_username="true" margin="0 auto" :userinfo="dUserinfo" v-if="dUserinfo" width="2.6rem" height="2.6rem">
      </SheadV1>
      <div class="userinfo-o" v-if="dUserinfo" style="line-height: .7rem">
        <div><b class="fa fa-map-marker minifont">  {{dUserinfo.province}}.{{dUserinfo.city}}</b> </div>
        <div class="minifont">{{dUserinfo.login_time|passTime}}前来过</div>
      </div>
      <div class="flex" v-if="!dUserinfo.is_me">
        <div class="flex-item">
          <followbtn @set_me_is_follow="set_me_is_follow" :me_is_follow="dUserinfo.me_is_follow"></followbtn>
        </div>
        <div class="flex-item">
          <btndefault ref="privatechatbtn" @click.native="gotoUrl(domain+'/MinProgram2/ChatAjax/index/touid/'+dUserinfo.uid)" style="margin-left: -1rem">私 聊</btndefault>
        </div>
      </div>
    <div class="ffh minifont">
      关注：{{dUserinfo.followcount}} | 粉丝：{{dUserinfo.followedcount}} | 访问量：{{dUserinfo.home_visits}}
    </div>
    <div class="intro minifont" @click="getMoreIntro">
      <p  v-html="'简介：'+intro(dUserinfo.intro)" class="intro_content" ></p>
      <div  class="getMoreIntroBtn" v-if="dUserinfo.is_me">编辑</div>
      <div  class="getMoreIntroBtn" v-else>
        <span v-if="introIsOverflow">...更多</span>
      </div>
    </div>

    <div style="margin-top: .4rem;" id="SubmenuCon">
      <SubMenu ref="submenu" :key="1" :style="showFixedSubmenuStyle"></SubMenu>

      <div class="routeview" @touchstart="touchstart" @touchmove="touchmove">
        <keep-alive><router-view></router-view></keep-alive>
      </div>

    </div>
  </div>
</template>
<script>
import SheadV1 from "@/components/user/s_head_v1.vue"
import SubMenu from "./PersonIndex/SubMenu.vue"
import IntroMask from "./PersonIndex/IntroMask.vue"
export default{
  data(){
    return {
      uid:0,
      dUserinfo: [],
      showFixedSubmenu:false,
      showIntroMask:1,
      introIsOverflow:0
    }
  },
  methods:{
    shareSetting(){
      var _this=this
      $.get("/Api/WxInterFace/getWxConfigParams",{url:window.location.href},function(data){
        if (data.status) {
          wx.config({
            debug: false,
            appId: data.appid,
            timestamp: data.timestamp,
            nonceStr: data.noncestr,
            signature: data.signature,
            jsApiList: [
              'updateAppMessageShareData',
              'updateTimelineShareData',
              'onMenuShareTimeline',
              'onMenuShareAppMessage'
            ]
          })
          //wx.ready(function(){
            //需在用户可能点击分享按钮前就先调用
            wx.updateTimelineShareData({
              title: document.title, // 分享标题
              link: data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: _this.dUserinfo.head_img,
              desc:"topart",
              success: function (res) {
                ////console.log(res)
                //alert('分享成功')
              }
            })
            //需在用户可能点击分享按钮前就先调用
            wx.updateAppMessageShareData({
              title: document.title, // 分享标题
              link: data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: _this.dUserinfo.head_img,
              desc:"topart",
              success: function (res) {
                ////console.log(res)
                //alert('分享成功')
              }
            })
          //})
          wx.ready(function(){
            wx.onMenuShareTimeline({
              title: document.title, // 分享标题
              link: data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: _this.dUserinfo.head_img,
              desc:"topart",
              success: function (res) {
                ////console.log(res)
                //alert('分享成功')
              }
            })
            //需在用户可能点击分享按钮前就先调用
            wx.onMenuShareAppMessage({
              title: document.title, // 分享标题
              link: data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: _this.dUserinfo.head_img,
              desc:"topart",
              success: function (res) {
                ////console.log(res)
                //alert('分享成功')
              }
            })
          })
        }/*endif*/
      })
    },
    touchstart(e){
      this.startx = e.touches[0].clientX
    },
    touchmove(e){
      let _this = this
      _this.movex = e.touches[0].clientX
      if ((_this.movex - _this.startx)>100){
        //console.log("右滑动")
        _this.$refs.submenu.prev()
      }else if((_this.movex - _this.startx)<-100){
        //console.log("左滑动")
        _this.$refs.submenu.next()
      }
    },
    getMoreIntro(){
      this.$router.push({name:'MoreIntro'})
    },
    getUserinfo(){
      let _this = this
      let uid = getQueryVariable("uid")
         // //console.log(uid)
         // return false
      if (!uid){
        window.location.href = domain+'/MinProgram2'
      }else{
        _this.uid = uid
        _this.MyJs.functions.getUserInfo({uid:_this.uid},function(res){
          ////console.log(res)
          //console.log(location.search)
          if (location.search.indexOf("is_me=1")>-1){
            res.data.is_me=1
            //console.log('is_me=1')
          }
          _this.dUserinfo = res.data
          _this.shareSetting()
          document.title = res.data.username+'的个人官网-'+_this.webSite
          _this.$store.commit('setUserinfo',res.data)
          myjs.postMessage(res.data,'bindmessage_shareuserinfo')
        },function (e){
          //console.log(e)
        })
      }
    },
    set_me_is_follow(v){
      let _this = this
      myjs.followdo({followed_uid:_this.dUserinfo.uid},function(){
        _this.$set(_this.dUserinfo,'me_is_follow',v)
        _this.$store.commit('setUserinfo',_this.dUserinfo )
      },function(data){
        alert(data.info)
        myjs.calllogin(_this.domain+_this.subRoot+"?uid="+_this.dUserinfo.uid)
      })

    },
    checkFixedSubmenu() {
      let _this = this
      // 获取当前滚动条向下滚动的距离
      $(window).scroll(function(){
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        // 当页面滚动到高度300px处时，显示搜索框
        ////console.log(scrollTop);
        if (scrollTop > $("#SubmenuCon").offset().top) {
          _this.showFixedSubmenu = true;
        } else {
          _this.showFixedSubmenu = false;
        }
      })
    },
    checkShowIntroMask(){
      let _this = this
      if (_this.$route.query.showIntroMask!==undefined){
        _this.showIntroMask=_this.$route.query.showIntroMask
      }
    },
    calIntroIsOverflow(){
      let _this = this
      if($(".intro").find('.intro_content').height() > $('.intro').height()){
        _this.introIsOverflow=1
      }else{
        _this.introIsOverflow=0
      }
    }
  },
  computed:{
    showFixedSubmenuStyle(){
      let _this = this
      if (_this.showFixedSubmenu){
        return {
          position: "fixed",
          top: 0,
          zIndex: 999,
          width: "100%",
          backgroundColor: "#ffffff"
        }
      }else{
        return ""
      }
    }
  },
  filters:{
    passTime(v){
      let timestamp = Date.parse(new Date())/1000;
      let diffTime = timestamp-parseInt(v)
      if (diffTime<3600)return Math.floor(diffTime/60) +"分钟"
      return Math.floor(diffTime/3600)+"小时"
    }
  },
  mounted(){
      let _this = this
      this.getUserinfo();
      this.checkFixedSubmenu()
      this.checkShowIntroMask()
      if (_this.$route.query.r!==undefined){
          _this.$router.push({name:_this.$route.query.r})
      }
  },
  updated() {
    this.calIntroIsOverflow()
  },
  components:{SubMenu, SheadV1, IntroMask}
}
</script>
<style scoped>
.fa-home{font-size: .8rem;position: absolute;top: .5rem;left: .5rem;color: #00d6d6;z-index: 12}
  .app{color:#333333}
  .sheadv1{margin-top: .58rem;}
  .userinfo-o{text-align: center;font-size: 12px;}
  .ffh{margin-top:.4rem;text-align: center}
.intro{
  max-height: 3.6rem;margin-top: .4rem;padding: 0 .72rem;line-height: .63rem;color: black;overflow: hidden;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.intro .getMoreIntroBtn{
  position: absolute;
  color: #00d6d6;
  bottom: 0rem;
  height: .5rem;
  right: .7rem;
  padding: 0 .21rem;
  background-color: #ffffff;
}
</style>
